<template>
  <div class="wrap">
    <SkyCardPanel title="引用图标库" subTitle='点击复制'>
      <div slot="main">

     

        <div class="inner-wrap">
          <div v-for="item in icontList" :key="item" @click="handleClipboard(generateIconCode(item), $event)">
            <span :class="`iconfont icon-${item}`"></span>
            <p>iconfont icon-{{item}}</p>
          </div>

        </div>

      </div>
    </SkyCardPanel>
        <SkyCardPanel title="更多图标">
      <div slot="main" class="containter-form">
        <div class="block">
          <SkyButton type="primary" @click="watchMoreIconFun()">更多图标，点击查看</SkyButton> <span></span>
        </div>
        

      </div>
    </SkyCardPanel>

  </div>
</template>

<script>
  import clipboard from "@/utils/clipboard";

  export default {
    data () {
      return {
        value: null,
        options: [
          { name: 'Vue.js', language: 'JavaScript' },
          { name: 'Rails', language: 'Ruby' },
          { name: 'Sinatra', language: 'Ruby' },
          { name: 'Laravel', language: 'PHP', $isDisabled: true },
          { name: 'Phoenix', language: 'Elixir' }
        ],
        icontList: [
          "save",
          "Dollar-circle-fill",
          "woman",
          "Import",
          "poweroff-circle-fill",
          "icon_add",
          "appstore",
          "meh-fill",
          "icon_addmessage",
          "close-square",
        ]
      }
    },
    methods: {
      generateIconCode (symbol) {
        return `<span class="iconfont icon-${symbol}"></span>`;
      },
      handleClipboard (text, event) {
        clipboard(text, event);
      },
      watchMoreIconFun(){
        console.log("1212")
        window.open('http://61.177.38.106:14567/show/iconfont/index.html','_blank')
      }
    }
  }
</script>

<style scoped lang="scss">
.inner-wrap {
  display: flex;
  flex-wrap: wrap;
  & > div {
    width: 100px;
    text-align: center;
    cursor: pointer;
    margin: 8px;
  }
}
</style>